<template>
  <div class="select-date">
    <div class="select-day">
      <div
        v-for="(item,index) in deliveryTimeList"
        :key="index"
        class="day"
        :class="nowDay===index?'active':''"
        @click="nowDay = index;"
      >{{ item.day }}</div>
    </div>
    <div class="select-time">
      <div v-if="nowDay===0">
        <div
          v-for="(i,index) in deliveryTimeList[nowDay].timeList"
          :key="index"
          class="time"
          :class="i==selectTime&&nowDay===selectDay?'select':''"
          @click="clickTime(i)"
        >
          {{ index === 0 ? '立即送达 ' + i : i }}
          <icon v-show="i==selectTime&&nowDay===selectDay?'select':''" type="success" />
        </div>
      </div>
      <div v-if="nowDay!==0">
        <div
          v-for="(i,index) in deliveryTimeList[nowDay].timeList"
          :key="index"
          class="time"
          :class="i==selectTime&&nowDay===selectDay?'select':''"
          @click="clickTime(i)"
        >
          {{ i }}
          <icon v-show="i==selectTime&&nowDay===selectDay?'select':''" type="success" />
        </div>
      </div>
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
import { Icon } from 'vux'
export default {
  components: { Icon },
  data() {
    return {
      showDelivery: false,
      deliveryTimeList: [],
      nowDay: 0,
      selectTime: '',
      selectDay: 0
    }
  },
  created() {
    this.getDliveryTime()
  },
  methods: {
    clickTime(text) {
      this.selectTime = text
      this.selectDay = this.nowDay
    },
    // 计算配送时间
    getDliveryTime() {
      // 获取当前时间
      const date = new Date()
      // 获取明天时间
      const morning = new Date(date.getTime() + (86400000))
      // 今天
      const month = `0${date.getMonth() + 1}`.substr(-2)
      const day = Number(`0${date.getDate()}`.substr(-2))
      // 明天
      const month2 = `0${morning.getMonth() + 1}`.substr(-2)
      const day2 = Number(`0${morning.getDate()}`.substr(-2))
      console.log('nowDay---', date)
      const today = `今天${month}月${day}日`
      const nextDay = `明天${month2}月${day2}日`

      // 获取当前1小时后的时间
      const timeDate = new Date(date.getTime() + 3600000)
      console.log('timeDate--', timeDate)
      // 获取一小时后的时间段
      const todayList = this.getTimeList(timeDate.getHours(), timeDate.getMinutes())
      console.log('timeDate1--', todayList)
      this.deliveryTimeList.push({ day: today, timeList: todayList })
      // 获取明天的时间段
      const nextDayList = this.getTimeList(7, 0)
      this.deliveryTimeList.push({ day: nextDay, timeList: nextDayList })
      this.selectTime = this.deliveryTimeList[0].timeList[0]
    },
    getTimeList(hour, minut) {
      const timeList = []
      const startTime = hour < 7 ? 7 : hour
      if (minut < 30) {
        for (let i = 0; i < 23 - startTime; i++) {
          for (let j = 0; j < 2; j++) {
            if (j % 2 === 0) {
              timeList.push(
                startTime + i + ':00' + '-' + (startTime + i) + ':30'
              )
            } else {
              timeList.push(
                startTime + i + ':30' + '-' + (startTime + i + 1) + ':00'
              )
            }
          }
        }
      } else {
        for (let i = 0; i < 23 - startTime; i++) {
          for (let j = 0; j < 2; j++) {
            if (j % 2) {
              timeList.push(
                startTime +
                  1 +
                  i +
                  ':00' +
                  '-' +
                  (startTime + 1 + i) +
                  ':30'
              )
            } else {
              timeList.push(
                startTime + i + ':30' + '-' + (startTime + i + 1) + ':00'
              )
            }
          }
        }
      }
      return timeList
    }
  }
}
</script>

<style lang="less" scoped>
.select-date {
  height: 500px;
  overflow: hidden;
  .select-day {
    height: 100%;
    float: left;
    width: 300px;
    .day {
      font-size: 30px;
      line-height: 80px;
      text-align: center;
      &.active {
        background-color: #fff;
      }
    }
  }
  .select-time {
    height: 100%;
    margin-left: 300px;
    background-color: #fff;
    padding: 0 20px;
    overflow-y: auto;
    .time {
      font-size: 30px;
      line-height: 80px;
      border-bottom: 2px solid #eee;
      &.select {
        color: #ff4a00;
      }
      i {
        float: right;
        font-size: 30px;
        color: #ff4a00;
        margin-top: 26px;
      }
    }
  }
}
</style>
